import React, { useState, useEffect, useContext } from "react";
import { View, StyleSheet, Dimensions, Text, TouchableOpacity } from "react-native";
import Modal from "react-native-modal";
import { Icon, Button } from "@rneui/themed";
import CommonContext from '@/utils/createContext'
import { max } from "@/utils/util";

const { width, scale } = Dimensions.get('window')
const ratio = width * scale / 1080

const GasDetail = () => {

    const { modalVisible, setModalVisible, gasData, setGasData, coinType, gasTime, setGasTime, gasRank, setGasRank } = useContext(CommonContext)
    const [gas, setGas] = useState('');
    const [gasObj, setGasObj] = useState({});

    useEffect(() => {
        setGas(gasData.gas)
    }, [gasData]);

    const handlePressCancel = () => {
        setModalVisible(false)
    }

    const handlePressChange = (type, value) => {
        setGasRank(type)
        if (gasData) {
            let obj = JSON.parse(JSON.stringify(gasData))
            obj.maxpriorityfee = ((1 + value / 100) * obj.maxpriorityfeestatic).toFixed(9)
            obj.maxfee = ((1 + value / 100) * obj.maxpriorityfeestatic + 2 * obj.base_fee).toFixed(9)
            if (value == 33) {
                setGasTime('Estimated time > 30 seconds')
            }
            if (value == 66) {
                setGasTime('Estimated time < 30 seconds')
            }
            if (value == 99) {
                setGasTime('Estimated time < 15 seconds')
            }
            obj.gasprice = max(obj.maxpriorityfee, obj.maxfee)
            obj.gas = obj.gaslimit * obj.gasprice / Math.pow(10, 9)
            setGas(obj.gas)
            setGasObj(obj)
        }
    }

    const handlePressSave = () => {
        setGasData(gasObj)
        setModalVisible(false)
    }

    return (
        <Modal
            isVisible={modalVisible}
            backdropColor='#000000'
            backdropOpacity={0.34}
            style={styles.container}
        >
            <View style={styles.bodyContent}>
                <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', marginTop: 10 * ratio }}>
                    <Text style={styles.title2}>Handling fee details</Text>
                    <Icon type="ionicon" name="close" color="#262626" size={25} style={{ marginRight: 23 * ratio }} onPress={handlePressCancel} />
                </View>
                <View style={{ flexDirection: 'row', justifyContent: 'center', marginTop: 20 * ratio }}>
                    <Text style={styles.title1}>{gas && parseFloat(gas) && parseFloat(gas).toFixed(9)} </Text>
                    <Text style={{ ...styles.title1, color: '#5B6DFD' }}>{coinType}</Text>
                </View>
                <View style={{ flexDirection: 'row', justifyContent: 'center', marginTop: 4 * ratio }}>
                    <Text style={styles.title4}>Max fee:({gas && parseFloat(gas) && parseFloat(gas).toFixed(9)} {coinType})</Text>
                </View>
                <View style={{ flexDirection: 'row', justifyContent: 'center', marginTop: 11 * ratio }}>
                    <Text style={styles.title4}>{gasTime}</Text>
                </View>
                <View style={{ alignItems: 'center', marginTop: 21 * ratio }}>
                    <View style={{ ...styles.changeContent, width: 248 * ratio, height: 19 * ratio, }}>
                        <TouchableOpacity style={styles.circle1} onPress={() => { handlePressChange('slow', 33) }}>
                            {gasRank === 'slow' && <View style={{ ...styles.circle2, backgroundColor: '#14BD6F' }}></View>}
                        </TouchableOpacity>
                        <TouchableOpacity style={styles.circle1} onPress={() => { handlePressChange('middle', 66) }}>
                            {gasRank === 'middle' && <View style={{ ...styles.circle2, backgroundColor: '#FF6600' }}></View>}
                        </TouchableOpacity>
                        <TouchableOpacity style={styles.circle1} onPress={() => { handlePressChange('fast', 99) }}>
                            {gasRank === 'fast' && <View style={{ ...styles.circle2, backgroundColor: '#FF0000' }}></View>}
                        </TouchableOpacity>
                    </View>
                    <View style={{ ...styles.changeContent, width: 229 * ratio, height: 12 * ratio, marginTop: 6 * ratio }}>
                        <View style={styles.divider1}></View>
                        <View style={styles.divider1}></View>
                        <View style={styles.divider1}></View>
                    </View>
                    <View style={styles.divider2}></View>
                    <View style={{ ...styles.changeContent, width: 250 * ratio, height: 15 * ratio, marginTop: 6 * ratio }}>
                        <Text style={styles.title4}>Slow</Text>
                        <Text style={styles.title4}>Middle</Text>
                        <Text style={styles.title4}>Fast</Text>
                    </View>
                </View>
                <View style={{ alignItems: 'center', marginTop: 17 * ratio }}>
                    <Button buttonStyle={styles.button} onPress={handlePressSave}>
                        <Text style={styles.title3}>Save</Text>
                    </Button>
                </View>
            </View>
        </Modal>
    )
}

const styles = StyleSheet.create({
    container: {
        justifyContent: 'flex-end',
        alignItems: 'center'
    },
    bodyContent: {
        width: 331 * ratio,
        height: 292 * ratio,
        backgroundColor: '#FFFFFF',
        borderTopLeftRadius: 18,
        borderTopRightRadius: 18,
        marginBottom: -20 * ratio
    },
    changeContent: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between'
    },
    circle1: {
        width: 19 * ratio,
        height: 19 * ratio,
        borderColor: '#707070',
        borderWidth: 1,
        borderRadius: 50,
        justifyContent: 'center',
        alignItems: 'center'
    },
    circle2: {
        width: 10 * ratio,
        height: 10 * ratio,
        borderRadius: 50
    },
    divider1: {
        width: 0,
        height: 12 * ratio,
        borderColor: '#707070',
        borderWidth: 1
    },
    divider2: {
        width: 230 * ratio,
        height: 0,
        borderColor: '#707070',
        borderWidth: 1
    },
    title1: {
        fontSize: 24,
        fontFamily: 'Microsoft YaHei',
        fontWeight: 'bold',
        color: '#FF6600',
        lineHeight: 32
    },
    title2: {
        fontSize: 15,
        fontFamily: 'Microsoft YaHei',
        fontWeight: 'bold',
        color: '#262626',
        lineHeight: 20,
        marginLeft: 22 * ratio
    },
    title3: {
        fontSize: 13,
        fontFamily: 'Microsoft YaHei',
        fontWeight: '400',
        color: '#FFFFFF',
        lineHeight: 18
    },
    title4: {
        fontSize: 12,
        fontFamily: 'Microsoft YaHei',
        fontWeight: 'bold',
        color: '#262626',
        lineHeight: 15
    },
    button: {
        width: 246 * ratio,
        height: 37 * ratio,
        backgroundColor: '#5B6DFD',
        borderRadius: 19
    }
})
export default GasDetail